<template>
	<view class="uni-wrap">
		<view class="tabBtn" v-if="userIdentity=='用户'?true:false">
			<view :class="tabIndex==0? 'title select':'title'" @click="tabClick(0)">发起提交</view>
			<view :class="tabIndex==1? 'title select':'title'" @click="tabClick(1)">查看数据</view>
			<view class="line" :style="userIdentity=='用户'?'left:' + ((tabIndex *50)+25)+ 'vw':'left:' + (tabIndex *50)+ 'vw;'"></view>
		</view>
		<view class="tabBox" :style="'transform: translateX(' + tabIndex*-100 + 'vw)'">
			<view class="tab" >
				<view class="data-box">
					<view class="form-block">
						<view class="card">
							<view class="card-body">
								<u--form
								class="from-card"
								labelPosition="top"
								labelWidth="80"
								:model="info"
								:rules="rules"
								ref="ruleForm">
									<u-form-item
									label="物资编号"
									prop="type"
									required
									@click="gotoPage('/subPackTask/taskButler/chooseProject?type=物资管理')"
									borderBottom>
										<u--input
										disabled
										disabledColor="#ffffff"
										suffixIcon="arrow-right"
										v-model="info.code"
										placeholder="请选择"
										border="none">
										</u--input>
									</u-form-item>
									<u-form-item
									label="物资名称"
									prop="type"
									required
									borderBottom>
										<u--input
										disabled
										disabledColor="#ffffff"
										v-model="info.wzName"
										placeholder="请选择物资编号"
										border="none">
										</u--input>
									</u-form-item>
									<u-form-item
									label="管理员"
									prop="adminName"
									required
									@click="gotoPage('/components/choose-user/choosePer?chooseType=单选&type=物资管理&chooseUsers='+JSON.stringify(adminUsers))"
									borderBottom>
										<u--input
										disabled
										disabledColor="#ffffff"
										suffixIcon="arrow-right"
										v-model="info.adminName"
										placeholder="请选择"
										border="none">
										</u--input>
									</u-form-item>
									<u-form-item
									label="借用人"
									prop="type"
									required
									borderBottom>
										<u--input
										disabled
										disabledColor="#ffffff"
										v-model="info.userName"
										border="none">
										</u--input>
									</u-form-item>
									<u-form-item
									label="借用时间"
									prop="borrowTime"
									labelWidth="100"
									required
									borderBottom>
										<u--input
										disabled
										disabledColor="#ffffff"
										v-model="info.borrowTime"
										border="none">
										</u--input>
									</u-form-item>
									<u-form-item prop="reason" label="借用事由" required borderBottom>
										<u--textarea
										v-model="info.reason"
										border="none"
										autoHeight
										count
										height="140"
										placeholder="请输入借用事由" >
										</u--textarea>
									</u-form-item>
								</u--form>
							</view>
						</view>
					</view>
				</view>
				
				<view class="submit-button">
					<view class="submit-block" @click="submit()">
						提交
					</view>
				</view>
			</view>
			
			<view class="tab" >
				<view style="margin-top: 100rpx;" v-if="list.length < 1">
					<u-empty
						text="暂无数据"
						icon="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/005b6980c9514d1e8e4a0cee0de018e4.png">
					</u-empty>
				</view>
				<u-swipe-action>
					<u-swipe-action-item
						:disabled="userIdentity=='用户'"
						:options="options"
						@click="delWzjy"
						v-for="(item,index) in list" :key="item.id">
						<view class="swipe-action u-border-top u-border-bottom" @click="gotoPage('/subPackTask/wzuse/detail?id='+item.id+'&userIdentity='+ userIdentity)">
							<view class="PhotographerBoxR" style="margin-left: 30rpx;">
<!-- 								<view class="text-sm text-black" style="font-size: 32rpx;">
									<view>{{item.userName}}提交的物资借用</view>
									<view class="text-sm text-grey" style="position: absolute;right: 0;top:0;margin: 25rpx 50rpx 0 0;">
										{{item.borrowTime}}
									</view>
								</view> -->
								<view class="text-sm text-grey margin-top-xs">物资编号：{{item.code}}</view>
								<view class="text-sm text-grey margin-top-xs">物资管理员：{{item.adminName}}</view>
								<view class="text-sm text-grey margin-top-xs">物资名称：{{item.wzName}}</view>
								<view class="text-sm text-grey margin-top-xs">借用时间：{{item.borrowTime}}</view>
								<view class="text-sm text-grey margin-top-xs" v-if="item.status == 0">归还时间：{{item.backTime}}</view>
								<view class="text-sm text-grey margin-top-xs" style="display: flex;margin-top: 30rpx;">
									<view>
										<u-avatar v-if="item.avatar" size="20" shape="square" :src="item.avatar"></u-avatar>
										<u-avatar
											v-else
											size="20"
											shape="square"
											:text="item.userName.slice(1)"
											:fontSize="item.userName.length > 2?8:12"
											bgColor="#0087FC">
										</u-avatar>
									</view>
									<span style="padding-left: 10rpx;color: #000;font-size: 28rpx;">由{{item.userName}}提交</span>
									<view style="position: absolute;right: 0;margin-right: 48rpx;">
										<text v-if="item.status == 0" style="color: #269B54;font-weight: 26rpx;">已归还</text>
										<text v-if="item.status == 1" style="color: #E6900D;font-weight: 26rpx;">出借中</text>
									</view>
								</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { strFormatMinutes } from '@/utils/format.js'
	import { getDicts } from '@/api/dict.js'
	import { getList,add,getAdminList,detwz } from '@/api/wzuse.js'
	export default {
		data() {
			return {
				user:{},
				userIdentity:'',
				dateField:'',
				dateValue:String(new Date),
				pickIndex:0,
				pickField:'',
				showLength:4,
				pageNum:1,
				list:[],
				tabIndex:0,
				tabList:[
					{
						name: '发起提交',
					}, 
					{
						name: '查看数据',
					}
				],
				amountAll:'',
				range: [],
				info:{
					wzId:'',
					code:'',
					wzName:'',
					adminId:'',
					adminName:'',
					userName:'',
					borrowTime:'',
					operateTime:'',
					reason:'',
					type:'借用'
				},
				adminUsers:[],
				options: [{
					text: '删除'
				}],
				rules:{
					'id': {
						type: 'string',
						required: true,
						message: '请选择物资编号',
						trigger: ['blur', 'change']
					},
					'name': {
						type: 'string',
						required: true,
						message: '请选择物资编号',
						trigger: ['blur', 'change']
					},
					'fzrName': {
						type: 'string',
						required: true,
						message: '请选择管理员',
						trigger: ['blur', 'change']
					},
					'userName': {
						type: 'string',
						required: true,
						message: '请选择借用人员',
						trigger: ['blur', 'change']
					},
					'borrowTime': {
						type: 'string',
						required: true,
						message: '请输入时长',
						trigger: ['blur', 'change']
					},
					'reason': {
						type: 'string',
						required: true,
						message: '请输入请假事由',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.ruleForm.setRules(this.rules)
		},
		onReachBottom(){
			if(this.tabIndex == 1){
				this.pageNum += 1
				this.getListData()
			}
		},
		onPullDownRefresh(){
			if(this.tabIndex == 1){
				this.pageNum = 1
				this.list = []
				this.getListData()
				uni.stopPullDownRefresh()
			}
		},
		onLoad(option) {
			this.tabClick(option.tabIndex)
			this.userIdentity = option.userIdentity
			this.user = uni.getStorageSync("loginInfo").user
			this.info.userName = this.user.userName
			this.info.userId = this.user.userId
			this.info.borrowTime = this.info.operateTime =strFormatMinutes(new Date())
			this.getdictList()
		},
		methods: {
			setProject(e){
				this.info.wzId = e.wzId
				this.info.code = e.code
				this.info.wzName = e.wzName
				this.info.adminName = e.adminName
				this.info.adminId = e.adminId
			},
			setChooseUsers(e){
				this.info.adminName = e[0].userName
				this.info.adminId = e[0].userId
			},
			submit(){
				this.$refs.ruleForm.validate().then(res => {
					// 提交审核
					this.addVacation()
				}).catch(errors => {
					uni.$u.toast('请将信息填写完整')
				})
			},
			async addVacation(){
				console.log(this.info)
				const { data } = await add(this.info);
				if(data.code == 200){
					uni.showToast({ title: '提交成功', icon: 'none' })
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				}else{
					uni.showToast({ title: data.msg, icon: 'none' })
				}
			},
			closeUser(index,type) {
				if(this[type].length>this.showLength){
					this[type].splice(index+this[type].length-this.showLength,1)
				}else{
					this[type].splice(index,1)
				}
			},
			setUsers(e) {
				if (this.t == 'choose') {
					this.userList.forEach(its => {
						e.forEach(eIts => {
							if (its.userId == eIts.userId) {
								let getLocation = e.indexOf(eIts);
								e.splice(getLocation, 1)
							}
						})
					})
					this.userList = this.userList.concat(e)
				} else if (this.t == 'add-more') {
					this.userList = e
				}
			},
			async getdictList(){
				const { data } = await getDicts('zxch_vacatoin_type');
				if(data.code == 200){
					data.data.map(e=>{
						let obj = {
							id: e.dictValue,
							name: e.dictLabel
						}
						this.range.push(obj)
					})
					this.range = [this.range]
				}
			},
			async getListData(){
				let params = {
					pageNum:this.pageNum,
				}
				if(this.userIdentity == "用户") {
					const { data } = await getList(params);
					if(data.code == 200 && data.rows.length > 0){
						this.list = [...this.list,...data.rows]
					}
				}else {
					const { data } = await getAdminList(params);
					if(data.code == 200 && data.rows.length > 0){
						this.list = [...this.list,...data.rows]
					}
				}

			},
			tabClick(index) {
				this.tabIndex = index
				if(index == 1){
					this.pageNum = 1
					this.list = []
					this.getListData()
				}
			},
			async delWzjy(e){
				const { data } = await detwz(this.list[e.index].id);
				if(data.code == 200){
					this.list.splice(e.index,1)
				}
			}
		}
	}
</script>

<style>
	page{
		background-color: #f6f6f6;
		color: #333333;
	}
</style>
<style>
	.uni-wrap .tabBtn{
		position: relative;
		width: 100vw;
		height: 108rpx;
		font-size: 30rpx;
		line-height: 88rpx;
		display: flex;
		justify-content: left;
		align-items: center;
		color: #666;
		background-color: #fff;
	}
	.uni-wrap .tabBtn .title {
		box-sizing: border-box;
		text-align: center;
		padding: 10rpx 0;
		height: 88rpx;
		width: 50vw;
		font-size: 30rpx;
		color: #606266;
		transition: all .3s ease;
	}
	.uni-wrap .tabBtn .title.select {
		font-weight: bold;
	}
	.uni-wrap .tabBtn .line {
		position: absolute;
		width: 40rpx;
		height: 6rpx;
		background-color: #3c9cff;
		bottom: 6rpx;
		transform: translateX(-20rpx);
		transition: all .3s ease;
	}
	.uni-wrap .tabBox {
		display: flex;
		justify-content: space-between;
		width: 200vw;
		transform: translateX(0);
		transition: all .3s ease;
		height: calc(100vh - 100rpx);
	}
	.submit-button .submit-block  {
		width: 100vw;
	}
	.uni-wrap .tab {
		position: relative;
		width: 100vw;
	}
</style>